<template>
  <div class="rank" ref="rank">
    <scroll class="topList" :data = ranklist ref="topList">
      <ul>
        <li class="item" v-for="item in ranklist" :key = item.id @click="selectItem(item)">
          <div class="icon">
            <img width="100" height="100"  v-lazy="item.picUrl" alt="">
          </div>
          <ul class="songlist">
            <li class="song" v-for="(eachsong,index) in item.songList" :key = "index">
              <span>{{index+1}}</span>
              <span>{{eachsong.singername}}-{{eachsong.songname}}</span>
            </li>
          </ul>
        </li>
      </ul>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script>
import {getranklist} from "api/rank.js"
import {ERR_OK} from "api/config.js"
import Scroll from "base/scroll/scroll.vue"
import {playListMixin} from "commom/js/mixin.js"
import {mapMutations} from 'vuex'
export default {
  mixins:[playListMixin],
  data(){
    return{
      ranklist:[]
    }
  },
  created(){
    this._getRankList();
  },
  methods:{
    handlePlayList(playList){
      const bottom = playList.length > 0 ? '60px' : ''
      this.$refs.rank.style.bottom = bottom;
      this.$refs.topList.refresh()
    },
    selectItem(item){
      this.$router.push({
        path:`/rank/${item.id}`
      })     
      this.settopList(item);
    },
    _getRankList(){
      getranklist().then((res)=>{
        if(res.code === ERR_OK){
          this.ranklist = res.data.topList
        }
      })
    },
    ...mapMutations({
      settopList:'SET_TOPLIST'
    })
  },
  components:{
    Scroll
  }
}
</script>

<style lang="stylus" scoped>
@import "~commom/stulys/variable.styl"
@import "~commom/stulys/mixin.styl"
.rank
  position fixed
  top 88px
  width 100%
  bottom 0
  .topList
    height  100%
    overflow hidden
    .item
      display flex
      padding-top 20px
      margin 0 20px
      height 100px
      &:last-of-type
        padding-bottom 20px
      .icon
        flex 0 0 100px
        width 100px
        height 100px
      .songlist
        flex 1
        padding 0 20px
        display flex
        flex-direction column
        overflow hidden
        background-color $color-highlight-background
        height 100px
        font-size $font-size-small
        justify-content center
        color $color-text-l
        .song
          line-height 26px
          no-wrap()
</style>
